<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="renderer" content="webkit">
    <title>学员自主约车</title>
    <link rel="stylesheet" href="<%=path%>/CSS/responsive.css">
    <link href="<%=path%>/CSS/style.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .main {
            width: 100%;
            height: 900px;
            background: #ffffff;
        }

        .container {
            margin-left: auto;
            margin-right: auto;
            padding-left: 15px;
            padding-right: 15px;
            width: 1100px;
        }

        .centent {
            width: 1100px;
            padding-bottom: 400px
        }

        .div_top {
            margin-top: 25px;
            height: 50px;
            width: 95%;
            margin-left: 40px;
        }

        ul {
            list-style-type: none;
            border-bottom: 1px solid #57a0ff;
            height: 45px;
            padding-left: 0px;
            width: 100%;
        }

        .top_zl.active {
            color: #57a0ff;
            font-size: 16px;
            border-bottom: 5px solid #57a0ff;
            float: left;
            height: 40px;
            margin-right: 40px;
        }

        .top_zl {
            color: #444444;
            font-size: 16px;
            float: left;
            height: 45px;
            margin-right: 40px;
        }

        .jx span {
            text-align: center;
            font-size: 22px;
            color: #57a0ff;
            font-family: 700;
        }

        .top_zl:hover {
            color: #57a0ff;
            font-size: 16px;
            float: left;
            height: 40px;
            margin-right: 40px;
            cursor: pointer;
        }

        .subject-list img {
            margin-left: 40px;
            margin-top: 50px;
            cursor: pointer;
        }

        .subject-list img:hover {
            -moz-transform: translate(0px, -15px);
            -webkit-transform: translate(0px, -15px);
            -ms-transform: translate(0px, -15px);
            -webkit-transition: all 0.7s linear;
            -moz-transition: all 0.7s linear;
            -o-transition: all 0.7s linear;
            -ms-transition: all 0.7s linear;
            transition: all 0.7s linear;
        }

        .subject-order {
            margin-left: 40px;
            margin-top: 20px;
            width: 100%;
        }

        .subject-order .subject-order-xinxi {
            font-size: 14px;
            color: #444444;
            float: left;
            padding-right: 20px
        }

        .subject-order .subject-order-qx {
            font-size: 15px;
            color: #57a0ff;
            float: left;
            border-bottom: 2px solid #57a0ff;
        }

        #modal-overlay {
            visibility: hidden;
            position: fixed;
            text-align: center;
            filter: alpha(opacity=70);
            background-color: #444444;
            z-index: 100;
            left: 0px;
            top: 0px;
            bottom: 0px;
            width: 100%;
            height: 100%;
            opacity: 0.7;
            -moz-opacity: 0.7;
        }

        .modal-data, .modal-data2, .modal-data3 {
            z-index: 1001;
            width: 50%;
            min-height: 520px;
            background-color: #FFFFFF;
            padding: 5px;
            text-align: center;
            position: fixed;
            left: 20%;
            right: 25%;
        }

        .modal-data-main-list, .modal-data-main3, .modal-data-main2 {
            width: 100%;
            min-height: 420px;
        }

        .modal-data-lcsj {
            width: 100%;
            height: 80px
        }

        .modal-data-lcsj strong {
            display: block;
            text-align: center;
            font-size: 18px;
            color: #57a0ff;
            margin-top: 20px;
        }

        .modal-data-lcsj-list {
            width: 100%;
            height: 300px;
            overflow: scroll;
            overflow-x: hidden;
            background: #ffffff;
            line-height: 35px;
            margin-top: 30px;
        }

        /* ::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
        border-radius:10px;
        } */
        .lcsj-list, .lcsj-list-full {
            background: #ffffff;
            border: 1px solid #cccccc;
            color: #444444;
            font-size: 14px;
            width: 85%;
            height: 40px;
            margin-bottom: 15px;
            margin-left: 80px;
            margin-right: 20px;
        }

        .lcsj-list.active {
            background: #ffffff;
            border: 1px solid #57a0ff;
            color: #57a0ff;
            font-size: 14px;
            width: 85%;
            height: 40px;
            margin-bottom: 15px;
            margin-left: 80px;
            margin-right: 20px;
        }

        .lcsj-list:HOVER {
            background: #ffffff;
            border: 1px solid #57a0ff;
            color: #57a0ff;
            font-size: 14px;
            width: 85%;
            height: 40px;
            margin-bottom: 15px;
            margin-left: 80px;
            margin-right: 20px;
        }

        .scbtn, .scbtn1, .submit, .success {
            background: #57a0ff;
            border-radius: 20px;
            width: 130px;
            height: 35px;
            outline: none;
            color: #ffffff;
        }

        .modal-data-next {
            margin-top: 20px
        }

        .modal-data-lcsj-list-ul {
            margin: 0 10%;
            width: 90%;
            height: 100%;
        }

        .modal-data-lcsj-list ul {
            border: 0;
        }

        .modal-data-lcsj-list-ul-li {

        }

        .modal-data-lcsj-list-coach-list {
            width: 100%;
        }

        .modal-data-lcsj-list-coach-data, .modal-data-lcsj-list-coach-full {
            width: 170px;
            text-align: center;
            color: #444444;
            float: left;
            border: 1px solid #cccccc;
            margin: 10px 30px;
            height: 70px;
            background: #ffffff;
        }

        .modal-data-lcsj-list-coach-data div {
            height: 20px;
            line-height: 20px;
        }

        .modal-data-lcsj-list-coach-full div {
            height: 20px;
            line-height: 20px;
        }

        .modal-data-lcsj-list-coach-data div:first-child {
            margin-top: 15px;
        }

        .modal-data-lcsj-list-coach-full span {
            display: inline-block;
        }

        .modal-data-lcsj-list-coach-full div:first-child {
            margin-top: 15px;
        }

        .modal-data2 .modal-data-lcsj-list-coach-list span {
            display: inline;
        }

        .prev {
            background: #ffffff;
            border-radius: 20px;
            width: 130px;
            height: 35px;
            outline: none;
            color: #57a0ff;
            border: 1px solid #57a0ff;
            margin-right: 30px
        }

        .modal-data-lcsj-list-coach-data.active {
            width: 170px;
            text-align: center;
            color: #57a0ff;
            float: left;
            border: 1px solid #57a0ff;
            height: 70px;
            background: #ffffff;
        }

        .modal-data-lcsj-list-coach-data:HOVER {
            width: 170px;
            text-align: center;
            color: #57a0ff;
            float: left;
            border: 1px solid #57a0ff;
            height: 70px;
            background: #ffffff;
        }

        .modal-data3-order-success {
            text-align: center;
            margin-top: 100px;
        }

        .modal-data3-order-success-wz {
            text-align: center;
            margin-top: 30px;
            color: #57a0ff;
        }

        .modal-data3-order-success-data {
            text-align: center;
            margin-top: 30px;
        }

        .modal-data3-order-success-data span {
            font-size: 14px;
            color: #999999;
        }

        .modal-data3-success {
            margin-top: 50px;
        }

        .colse {
            text-align: right;
            height: 25px;
        }

        .colse-img, .prev, .submit, .success, .subject-order-qx {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="modal-overlay">

</div>

<div class="main">

    <div style="height: 100px">

    </div>
    <div id="lcss"></div>
    <div class="container">
        <div class="jx">
            <span>${cfficompanyName}</span>
        </div>
        <div class="centent">
            <div class="centent-div">
                <%--大车--%>
                <c:if test="${carTypeState  == 2}">
                    <div class="div_top">
                        <ul>
                            <li class="top_zl">小车预约</li>
                            <li class="top_zl active">大车预约</li>
                        </ul>
                    </div>
                    <div class="subject">
                        <div class="subject-list">
                            <c:if test="${weixinStudent.timingCharge == 0}">
                                <img onclick="selectExerciseCar('2','0','${carTypeState}')" alt="科目二练车"
                                     src="<%=path%>/image/kmyy/kmelc.png">
                                <img onclick="selectExerciseCar('3','0','${carTypeState}')" alt="科目三练车"
                                     src="<%=path%>/image/kmyy/kmslc.png">
                            </c:if>

                            <c:if test="${weixinStudent.timingCharge == 1}">
                                <img onclick="selectExerciseCar('2','1','${carTypeState}')" alt="科目二计时预约"
                                     src="<%=path%>/image/kmyy/kmejslc.png">
                                <img onclick="selectExerciseCar('3','1','${carTypeState}')" alt="科目三计时预约"
                                     src="<%=path%>/image/kmyy/kmsjslc.png">
                            </c:if>
                        </div>
                        <c:forEach items="${studentInitiativeCarList}" var="studentInitiativeCarList">
                            <div class="subject-order">
                                <span class="subject-order-xinxi">您已预约 ：${studentInitiativeCarList.trainCarTime}${studentInitiativeCarList.stratTime} / ${studentInitiativeCarList.endTime} </span>
                                <span class="subject-order-xinxi">教练：${studentInitiativeCarList.coachName}</span>
                                <span onclick="cancel('${studentInitiativeCarList.fid}')"
                                      class="subject-order-qx"> 是否取消</span>
                                <br>
                            </div>
                        </c:forEach>
                    </div>
                </c:if>
                <%--小车--%>
                <c:if test="${carTypeState  == 1}">
                    <div class="div_top">
                        <ul>
                            <li class="top_zl active">小车预约</li>
                            <li class="top_zl">大车预约</li>
                        </ul>
                    </div>
                    <div class="subject">
                        <div class="subject-list">
                            <c:if test="${weixinStudent.timingCharge == 0}">

                                <img onclick="selectExerciseCar('2','0','${carTypeState}')" alt="科目二练车"
                                     src="<%=path%>/image/kmyy/kmelc.png">
                                <img onclick="selectExerciseCar('3','0','${carTypeState}')" alt="科目三练车"
                                     src="<%=path%>/image/kmyy/kmslc.png">
                            </c:if>

                            <c:if test="${weixinStudent.timingCharge == 1}">
                                <img onclick="selectExerciseCar('2','1','${carTypeState}')" alt="科目二计时预约"
                                     src="<%=path%>/image/kmyy/kmelc.png">
                                <img onclick="selectExerciseCar('3','1','${carTypeState}')" alt="科目三计时预约"
                                     src="<%=path%>/image/kmyy/kmslc.png">
                            </c:if>
                        </div>
                        <c:forEach items="${studentInitiativeCarList}" var="studentInitiativeCarList">
                            <div class="subject-order">
                                <span class="subject-order-xinxi">您已预约 ：${studentInitiativeCarList.trainCarTime}${studentInitiativeCarList.stratTime} / ${studentInitiativeCarList.endTime} </span>
                                <span class="subject-order-xinxi">教练：${studentInitiativeCarList.coachName}</span>
                                <span onclick="cancel('${studentInitiativeCarList.fid}')"
                                      class="subject-order-qx"> 是否取消</span>
                                <br>
                            </div>
                        </c:forEach>
                    </div>
                </c:if>

            </div>

        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="<%=path%>/JQuery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path%>/HoganJS/handlebars-v4.0.11.js"></script>
<script id="table-template-lcss" type="text/x-handlebars-template">
    <div class="modal-data">
        <div class="modal-data-main-list">
            <div class="modal-data-lcsj">
                <div class="colse">
                    <img src="<%=path%>/image/kmyy/close.png" class="colse-img" style="padding: 4px;">
                </div>
                <strong>请选择练车时间</strong>
            </div>
            <div class="modal-data-lcsj-list">
                {{#each this}}
                {{#compare yyrs cfqty}}
                <div style="background: #f1f2f4;color: #999999"
                     class="lcsj-list-full">{{trainCarTime}}
                    {{stratTime}}{{endTime}}({{yyrs}}/{{cfqty}})
                    <input type="hidden" name="fid" value="{{fid}}">
                    <input type="hidden" name="lcsjfid" value="{{lcsjfid}}">
                    <a style="color: #d31515;padding-left: 2px">已满</a>
                </div>
                {{else}}
                <div class="lcsj-list" onclick="pitchOn($(this))">{{trainCarTime}}
                    {{stratTime}}{{endTime}}({{yyrs}}/{{cfqty}})
                    <input type="hidden" name="fid" value="{{fid}}">
                    <input type="hidden" name="lcsjfid" value="{{lcsjfid}}">
                </div>
                {{/compare}}
                {{/each}}
            </div>

            {{#isnull this}}
            <div style="color: #999999">暂无练车时间信息！</div>
            {{/isnull}}
        </div>
        <div class="modal-data-next">
            {{#isnull this}}
            <input type="button" class="scbtn1" onclick="location.reload()" value="返回主页">
            {{else}}
            <input type="button" class="scbtn" value="下一步">
            {{/isnull}}

        </div>
    </div>
    </div>
</script>
<script id="table-template-xzjx" type="text/x-handlebars-template">
    <div class="modal-data2" style="height: 560px;width: 940px;">
        <div class="modal-data-main2 container" style="width: 900px;">
            <div class="modal-data-lcsj" style="height: 120px">
                <strong style="padding-top: 30px">请选择练车教练</strong>
                <span style="color: #999999;font-size: 14px;padding-top: 20px">练车时间：2017年12月19 - 12月31日</span>
            </div>
            <div class="modal-data-lcsj-list">
                <ul class="modal-data-lcsj-list-ul">
                    {{#each this}}
                    {{#compare yyrs cfqty}}
                    <li class="modal-data-lcsj-list-coach-full" style="background: #f1f2f4;color: #999999">
                        <div>{{coachName}}</div>
                        <div>({{yyrs}}/{{cfqty}})<span style="color: #d31515;padding-left: 5px">已满</span></div>
                        <input type="hidden" name="coachid" value="{{coachid}}">
                    </li>
                    {{else}}
                    <li class="modal-data-lcsj-list-coach-data">
                        <div>{{coachName}}</div>
                        <div>({{yyrs}}/{{cfqty}})</div>
                        <input type="hidden" name="coachid" value="{{coachid}}">
                    </li>
                    {{/compare}}
                    {{/each}}
                    {{#isnull this}}
                    <div style="color: #999999">暂无教练信息！</div>
                    {{/isnull}}

                </ul>
            </div>
            <div class="modal-data2-next">


                {{#isnull this}}
                <input type="button" class="prev" value="上一步">
                <input type="button" class="scbtn1" onclick="location.reload()" value="返回主页">
                {{else}}
                <input type="button" class="prev" value="上一步">
                <input type="button" class="submit" value="确  定">
                {{/isnull}}
            </div>
        </div>
    </div>
</script>
<script id="table-template-success" type="text/x-handlebars-template">
    <div class="modal-data3" style="height: 450px">
        <div class="modal-data-main3">
            <div class="modal-data3-order-success">
                <img src="<%=path%>/image/kmyy/yycg.png">
            </div>
            <div class="modal-data3-order-success-wz">
                <strong style="font-size: 15px;">恭喜您预约成功！</strong>
            </div>
            <div class="modal-data3-order-success-data">
                <span style="margin-bottom: 10px">练车时间：{{stratTime}} - {{endTime}}</span>
                <span>教练：{{coachName}}</span>
            </div>
            <div class="modal-data3-success">
                <input type="button" class="success" value="完  成">
            </div>
        </div>
    </div>
</script>
<script id="table-template-error" type="text/x-handlebars-template">
    <div class="modal-data3" style="height: 450px">
        <div class="modal-data-main3">
            <div class="modal-data3-order-success">
                <img src="<%=path%>/image/kmyy/error.png">
            </div>
            <div class="modal-data3-order-success-wz">
                <strong style="font-size: 15px;">抱歉预约失败！</strong>
            </div>
            <div class="modal-data3-success">
                <input type="button" class="success" value="完  成">
            </div>
        </div>
    </div>
</script>
<script type="text/javascript">

    var myTemplatlcss = Handlebars.compile($("#table-template-lcss").html());

    var myTemplatxzjl = Handlebars.compile($("#table-template-xzjx").html());

    var myTemplatsucces = Handlebars.compile($("#table-template-success").html());

    var myTemplaterror = Handlebars.compile($("#table-template-error").html());

    //注册一个比较大小的Helper,判断v1是否大于v2
    Handlebars.registerHelper("compare", function (v1, v2, options) {
        if (v1 >= v2) {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });
    Handlebars.registerHelper("isnull", function (v1, options) {
        if (v1 == "") {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

    function cancel(fid) {
        $.ajax({
            url: '<%=path%>/DrivingSys/weixin/kmyy/deleteShareCarSubById',
            type: "post",
            data: {'fid': fid},
            dataType: "json",
            success: function (res) {
                if (res == 0) {
                    alert("取消失败请与服务台联系！")
                }
                else {
                    alert("取消成功!")
                    location.reload();
                }
            },
            error: function () {
                alert("网络似乎有问题!")
            }
        });

    }

    /*根据科目 *  sunject 科目  time 是否计时 carType 车类型*/
    function selectExerciseCar(subject, cftime, carType) {

        $.ajax({
            url: '<%=path%>/DrivingSys/weixin/kmyy/CalculateTimeLcssPc',
            type: "post",
            data: {
                'subject': subject,
                'cftime': cftime,
                'carType': carType
            },
            dataType: "json",
            success: function (res) {
                $('#lcss').append(myTemplatlcss(res));
                $('.lcsj-list:first-child').addClass("active");
                $('#modal-overlay').css('visibility', 'visible')
                $('.modal-data').css('visibility', 'visible')
            },

        });


    }

    //点击选中练车时间换样式
    function pitchOn(_this) {
        $(".lcsj-list.active").removeClass("active");
        _this.addClass("active");
    }

    //点击下一步选择教练
    $(document).on('click', '.scbtn', function () {

        var lcsjId = $('.active').find("input").eq(0).val();
        var lcsjfid = $('.active').find("input").eq(1).val();
        if (lcsjId == null) {
            alert('请选择练车时间后确定！')
            return
        }
        $.ajax({
            url: '<%=path%>/DrivingSys/weixin/kmyy/selectPracticeCarTimeByInfo',
            type: "post",
            data: {'lcsjfid': lcsjfid},
            dataType: "json",
            success: function (res) {
                if (res == true) {
                    $.ajax({
                        url: '<%=path%>/DrivingSys/weixin/kmyy/CalculateTimeXzjlPc',
                        type: "post",
                        data: {
                            'lcsjId': lcsjId,
                            'lcsjfid': lcsjfid
                        },
                        dataType: "json",
                        success: function (res) {
                            $('#lcss').append(myTemplatxzjl(res));
                            $('.modal-data-lcsj-list-coach-data:first-child').addClass("active")
                            $('#modal-overlay').css('visibility', 'visible')
                            $('.modal-data').css('visibility', 'hidden')
                            $('.modal-data2').css('visibility', 'visible')
                        },
                        error: function () {
                            alert("网络似乎有问题!")
                        }
                    });

                }
                else {
                    alert("此练车时间已经预约过了!")
                }
            },
            error: function () {
                alert("网络似乎有问题!")
            }
        });


    })

    //点击教练选中并且换样式
    $(document).on('click', '.modal-data-lcsj-list-coach-data', function () {
        $(".modal-data-lcsj-list-coach-data.active").removeClass("active");
        $(this).addClass("active");
    })

    //返回上一步
    $(document).on('click', '.prev', function () {
        $(".modal-data-lcsj-list-coach-data.active").removeClass("active");
        $('#modal-overlay').css('visibility', 'visible')
        $('.modal-data2').css('visibility', 'hidden')
        $('.modal-data').css('visibility', 'visible')
    })

    //提交
    $(document).on('click', '.submit', function () {
        var coachid = $('.modal-data-lcsj-list-coach-data.active').find("input").val();
        if (coachid == null) {
            alert("请选择教练后确定！")
            return
        }
        $.ajax({
            url: '<%=path%>/DrivingSys/weixin/kmyy/add_Sharecarsubentry',
            type: "post",
            data: {'coachid': coachid},
            dataType: "json",
            success: function (res) {
                if (res != null) {
                    $('#lcss').append(myTemplatsucces(res));
                }
                else {
                    alert('您已成功报名，不能重复报名！')
                    location = '<%=path%>/DrivingSys/weixin/kmyy/CalculateTimeMain'
                }

            },
            error: function () {
                $('#lcss').append(myTemplaterror());
            }
        });
        $('#modal-overlay').css('visibility', 'visible')
        $('.modal-data2').css('visibility', 'hidden')
        $('.modal-data3').css('visibility', 'visible')
    })

    //完成，并刷新页面
    $(document).on('click', '.success', function () {

        $('#modal-overlay').css('visibility', 'hidden')
        $('.modal-data3').css('visibility', 'hidden')
        location.reload();
    })
    $(document).on('click', '.colse-img', function () {
        $('#modal-overlay').css('visibility', 'hidden')
        $('.modal-data').css('visibility', 'hidden')
    })

</script>
</html>